//src\renderer\Component\BarTop.vue
<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import { ipcRenderer } from "electron";
defineProps<{ title?: string }>();
let isMaximized = ref(false);

// debug窗口
let debugMainWindow = () => {
  ipcRenderer.invoke("openDevTools");
};
//关闭窗口
let closeWindow = () => {
  ipcRenderer.invoke("closeWindow");
};
//最大化窗口
let maxmizeMainWin = () => {
  ipcRenderer.invoke("maxmizeWindow");
};
//最小化窗口
let minimizeMainWindow = () => {
  ipcRenderer.invoke("minimizeWindow");
};
//还原窗口
let unmaximizeMainWindow = () => {
  ipcRenderer.invoke("unmaximizeWindow");
};
//窗口最大化事件
let winMaximizeEvent = () => {
  isMaximized.value = true;
};
//窗口取消最大化事件
let winUnmaximizeEvent = () => {
  isMaximized.value = false;
};
onMounted(() => {
  ipcRenderer.on("windowMaximized", winMaximizeEvent);
  ipcRenderer.on("windowUnmaximized", winUnmaximizeEvent);
});
onUnmounted(() => {
  ipcRenderer.off("windowMaximized", winMaximizeEvent);
  ipcRenderer.off("windowUnmaximized", winUnmaximizeEvent);
});
</script>

<template>
  <div class="topBar">
    <div class="winTitle">{{ title }}</div>
    <div class="winTool">
      <div @click="debugMainWindow">调试窗口</div>
      <div @click="minimizeMainWindow">最小化窗口</div>
      <div v-if="isMaximized" @click="unmaximizeMainWindow">还原窗口</div>
      <div v-else @click="maxmizeMainWin">最大化窗口</div>
      <div @click="closeWindow">关闭窗口</div>
    </div>
  </div>
</template>

<style scoped>
.topBar {
  -webkit-app-region: drag; /* 启用拖拽 */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background-color: #2c3e50;
  color: white;
  cursor: move;
}
.winTool{
    display: flex;
    flex-direction: row;
}
.winTool > div{
    padding-right: 12px;
    -webkit-app-region: no-drag;
    cursor: pointer;
}
</style>
